<template>
	<view class="content">
		<view class="bg-view"></view>
		<!-- 合同基本信息 -->
		<view class="info-cont">
			<view class="inner">
				<view class="head">
					<view class="left">
						<image class="img" src="../../../static/images/icon_contract_gray.png" mode="aspectFill"></image>
						<text class="text">{{contract.name}}</text>
					</view>
					<view class="state-box" v-if="contract.checkStatus==1&&contract.status==0">
						<!-- <view class="state param" v-if="contract.checkStatus == '0'"><image class="img" src="../../../static/images/icon_shz.png" mode="aspectFill"></image>审核中</view>
						<view class="state info" v-if="contract.checkStatus == '1'"><image class="img" src="../../../static/images/icon_tg.png" mode="aspectFill"></image>已审核</view>
						<view class="state success" v-if="contract.checkStatus == '2'"><image class="img" src="../../../static/images/icon_zf.png" mode="aspectFill"></image>已拒绝</view> -->
						<dropdown  :list="list" @onClick="dropDownChange"></dropdown>
					</view>
				</view>
				<!-- 回款信息 -->
				<view class="msg-box">
					<view class="left auto">
						<view class="item">
							<image class="img" src="../../../static/images/icon_money.png" mode="aspectFill"></image>
							<text class="text">合同金额</text>
							<text class="money">￥{{contract.money}}</text>
						</view>
						<view class="item">
							<image class="img" src="../../../static/images/icon_money.png" mode="aspectFill"></image>
							<text class="text">回款进度({{parseInt(contract.receivedMoney/contract.money*100)}}%)</text>
							<!-- <view class="progress-box">
								<view class="cu-progress round">
									<view class="bg-green" :style="{ width: progress }"></view>
								</view>
							</view> -->
						</view>
						<view class="item">
							<text class="text">审核状态：{{utils.getDictLabelName("contractStatus",contract.checkStatus)}}</text>
						</view>
						<view class="item">
							<text class="text">合同状态：{{utils.getDictLabelName("contractOpStatus",contract.status)}}</text>
						</view>
						<view class="item">
							<text class="text">已回款：￥{{contract.receivedMoney}} 待回款：￥{{contract.unreceivedMoney}}</text>
						</view>
						<view class="item">
							<text class="text">签约时间：{{contract.orderDate}}</text>
						</view>
					</view>
				</view>
				<!-- 客户 -->
				<view class="cust-box" @click="showCustDetail(customer)">
					<view class="left">
						<image class="img" src="../../../static/images/icon_head_blue.png" mode="aspectFill"></image>
						<text class="text">{{customer.customerName}}</text>
					</view>
					<image class="arrow" src="../../../static/images/right_arrow.png" mode="aspectFill"></image>
				</view>
				<!-- 审核中操作按钮 -->
				<view class="hand-box" v-if="contract.checkStatus == 0&&contract.status == 0&&currentUser.userId==contract.auditUserId">
					<view class="btn adopt" @click="toExam(1)">
						<image class="img" src="../../../static/images/icon_tg_white.png" mode="aspectFill"></image>
						通过
					</view>
					<view class="btn refuse" @click="toExam(2)">
						<image class="img" src="../../../static/images/icon_jj.png" mode="aspectFill"></image>
						拒绝
					</view>
				</view>
			</view>
		</view>
		<!-- 基本信息、相关信息切换 -->
		<scroll-view scroll-x class="nav text-center">
			<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in tabArr" :key="index" @tap="tabSelect" :data-id="index">
				{{item}}
			</view>
		</scroll-view>
	
		<!-- 基本信息 -->
		<essent-info ref="contractInfo"  v-show="TabCur===0"></essent-info>
		<!-- 相关信息 -->
		<relat-info ref="productInfo" v-show="TabCur===1"></relat-info>
		<!-- 合同追加记录 -->
		<moneys ref="moneys" v-show="TabCur===2"></moneys>
	</view>
</template>

<script>
	import api from '@/api/api.js';
	import essentInfo from './essentInfo.vue'
	import relatInfo from './relatInfo.vue'
	import moneys from './moneys.vue'
	export default {
		components:{
			moneys, // 合同金额
			essentInfo, // 基本信息
			relatInfo // 相关信息
		},
		data() {
			return {
				list:[],
				currentUser:{},
				contractId:undefined,
				contract:{},
				customer:{},
				product:[],
				contractId:undefined,
				TabCur: 0, // 当前选中tab
				progress: '0', // 进度条
				scrollLeft: 0,
				tabArr: ['基本信息','产品信息','追加合同金额',]
			}
		},
		onLoad(options) {
			this.contractId = options.contractId
			// 修改顶部导航背景色
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#39b54a',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
			this.currentUser=JSON.parse(uni.getStorageSync('user'));
			console.log(this.currentUser)
			this.getContractDetails()
		},
		onShow() {
			this.list=[];
			this.getContractDetails()
			this.list.push("回款");
		},
		methods: {
			dropDownChange(val){
				if(val=="回款"){
					 this.addReceivable();
				}
				 
			},
			addReceivable(){
				uni.navigateTo({
					url: '../receivables/add?contractId='+this.contract.contractId
				})
			},
			getContractDetails(){
				var data = {contractId:this.contractId};
				var that=this;
				api.getContractDetails(data).then(
					res => {
						console.log(res);
						if(res.code==200){
							 this.contract=res.contract;
							 this.customer=res.customer;
							 this.product=res.product;
							 that.$refs.contractInfo.getContractDetails(this.contract,res.customer,res.user,res.contacts,res.auditUser);
							 that.$refs.productInfo.getProductList(this.product);
							 that.$refs.moneys.getMoneys(this.contract.contractId);
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			// tab切换
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			// 查看客户详情
			showCustDetail(item){
				uni.navigateTo({
					url: '../../customer/customDetail?customerId='+item.customerId
				})
			},
			// 审核
			toExam(type){
				uni.navigateTo({
					url: './examine?contractId=' + this.contractId+"&checkStatus="+type
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		padding: 20upx 0;
		position: relative;
		.bg-view{
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			height: 160upx;
			background: #39b54a;
		}
		.info-cont{
			padding: 0 50upx;
			margin-bottom: 30upx;
			.inner{
				padding: 30upx;
				background: #fff;
				border-radius: 10upx;
				.head{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						display: flex;
						align-items: center;
						.img{
							width: 50upx;
							height: 50upx;
							margin-right: 20upx;
						}
						.text{
							font-size: 32upx;
							color: #000;
						}
					}
					// 审核状态
					.state-box{
						.state{
							width: 150upx;
							padding: 10upx 0;
							font-size: 24upx;
							text-align: center;
							display: flex;
							align-items: center;
							justify-content: center;
							.img{
								width: 20upx;
								height: 20upx;
								margin-right: 10upx;
							}
							&.param{
								background: #EBF3FE;
								color: #458BEB;
							}
							&.info{
								background: #F8F8F8;
								color: #BFBFBF;
							}
							&.success{
								background: #E7F7ED;
								color: #2FAC5F;
							}
						}
					}
				}
				.msg-box{
					display: flex;
					justify-content: space-between;
					margin-top: 10upx;
					.left{
						&.auto{
							width: 100%;
						}
						.item{
							display: flex;
							align-items: center;
							margin-top: 20upx;
							.progress-box{
								display: flex;
								width: 40%;
								margin-left: 20upx;
							}
							.img{
								width: 30upx;
								height: 30upx;
								margin-right: 10upx;
							}
							.text{
								font-size: 30upx;
								color: #333;
							}
							.money{
								font-size: 32upx;
								color: #E6A23C;
								font-weight: bold;
							}
						}
					}
					.right{
						width: 80upx;
						height: 80upx;
						align-self: flex-end;
					}
				}
				// 客户
				.cust-box{
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-top: 1px solid #f7f7f7;
					margin-top: 20upx;
					padding: 20upx 0;
					.left{
						display: flex;
						align-items: center;
						.img{
							width: 60upx;
							height: 60upx;
							margin-right: 20upx;
						}
						.text{
							font-size: 30upx;
							color: #3B80F7;
						}
					}
					.arrow{
						width: 20upx;
						height: 20upx;
					}
				}
				// 审核中操作按钮
				.hand-box{
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-top: 1px solid #f7f7f7;
					padding: 20upx 0;
					.btn{
						width: 47%;
						height: 80upx;
						line-height: 80upx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28upx;
						color: #fff;
						border-radius: 8upx;
						&.adopt{
							background: #2EB76F;
						}
						&.refuse{
							background: #F75759;
						}
						.img{
							width: 30upx;
							height: 30upx;
							margin-right: 20upx;
						}
					}
				}
			}
		}
	}
</style>
